<template>
	<view>
		<u-avatar class="avatar" size="96" :src="avatar"></u-avatar>
		<view class="nick ellipsis">{{nickname}}</view>
		<image class="top rollBack" :src="imgPath+'/static/img/activeB/rollback.png'" mode="widthFix"></image>
		<!-- 16种人格 -->
		<image class="iwidth" v-if="mbtiType == 'ENFJ'" :src="imgPath+'/static/big/result/ENFJ.png'" mode="widthFix"></image>
		<image class="iwidth" v-if="mbtiType == 'ENFP'" :src="imgPath+'/static/big/result/ENFP.png'" mode="widthFix"></image>
		<image class="iwidth" v-if="mbtiType == 'ENTJ'" :src="imgPath+'/static/big/result/ENTJ.png'" mode="widthFix"></image>
		<image class="iwidth" v-if="mbtiType == 'ENTP'" :src="imgPath+'/static/big/result/ENTP.png'" mode="widthFix"></image>
		<image class="iwidth" v-if="mbtiType == 'ESFJ'" :src="imgPath+'/static/big/result/ESFJ.png'" mode="widthFix"></image>
		<image class="iwidth" v-if="mbtiType == 'ESFP'" :src="imgPath+'/static/big/result/ESFP.png'" mode="widthFix"></image>
		<image class="iwidth" v-if="mbtiType == 'ESTJ'" :src="imgPath+'/static/big/result/ESTJ.png'" mode="widthFix"></image>
		<image class="iwidth" v-if="mbtiType == 'ESTP'" :src="imgPath+'/static/big/result/ESTP.png'" mode="widthFix"></image>
		<image class="iwidth" v-if="mbtiType == 'INFJ'" :src="imgPath+'/static/big/result/INFJ.png'" mode="widthFix"></image>
		<image class="iwidth" v-if="mbtiType == 'INFP'" :src="imgPath+'/static/big/result/INFP.png'" mode="widthFix"></image>
		<image class="iwidth" v-if="mbtiType == 'INTJ'" :src="imgPath+'/static/big/result/INTJ.png'" mode="widthFix"></image>
		<image class="iwidth" v-if="mbtiType == 'INTP'" :src="imgPath+'/static/big/result/INTP.png'" mode="widthFix"></image>
		<image class="iwidth" v-if="mbtiType == 'ISFJ'" :src="imgPath+'/static/big/result/ISFJ.png'" mode="widthFix"></image>
		<image class="iwidth" v-if="mbtiType == 'ISFP'" :src="imgPath+'/static/big/result/ISFP.png'" mode="widthFix"></image>
		<image class="iwidth" v-if="mbtiType == 'ISTJ'" :src="imgPath+'/static/big/result/ISTJ.png'" mode="widthFix"></image>
		<image class="iwidth" v-if="mbtiType == 'ISTP'" :src="imgPath+'/static/big/result/ISTP.png'" mode="widthFix"></image>
		<!-- 确认人格 -->
		<view v-if="!confirmRege">
			<image class="hinit" :src="imgPath+'/static/big/result/hinit.png'" mode="widthFix"></image>
			<image class="retest" @click="retest" :src="imgPath+'/static/big/result/retest.png'" mode="widthFix"></image>
			<image class="confirm" @click="confirm" :src="imgPath+'/static/big/result/confirm.png'" mode="widthFix"></image>
		</view>
		<!-- 契合人格 -->
		<view v-if="confirmRege">
			<image class="qihe" :src="imgPath+'/static/big/result/qihe.png'" mode="widthFix"></image>
			<!-- 契合人格1 -->
			<image class="qihe1" v-if="mbtiPartner1 == 'ENFJ'" :src="imgPath+'/static/big/result/hepai/ENFJ.png'" mode="widthFix"></image>
			<image class="qihe1" v-if="mbtiPartner1 == 'ENFP'" :src="imgPath+'/static/big/result/hepai/ENFP.png'" mode="widthFix"></image>
			<image class="qihe1" v-if="mbtiPartner1 == 'ESFJ'" :src="imgPath+'/static/big/result/hepai/ESFJ.png'" mode="widthFix"></image>
			<image class="qihe1" v-if="mbtiPartner1 == 'ESFP'" :src="imgPath+'/static/big/result/hepai/ESFP.png'" mode="widthFix"></image>
			<image class="qihe1" v-if="mbtiPartner1 == 'INFJ'" :src="imgPath+'/static/big/result/hepai/INFJ.png'" mode="widthFix"></image>
			<image class="qihe1" v-if="mbtiPartner1 == 'INTP'" :src="imgPath+'/static/big/result/hepai/INTP.png'" mode="widthFix"></image>
			<image class="qihe1" v-if="mbtiPartner1 == 'ISFJ'" :src="imgPath+'/static/big/result/hepai/ISFJ.png'" mode="widthFix"></image>
			<image class="qihe1" v-if="mbtiPartner1 == 'ISFP'" :src="imgPath+'/static/big/result/hepai/ISFP.png'" mode="widthFix"></image>
			<image class="qihe1" v-if="mbtiPartner1 == 'ENTJ'" :src="imgPath+'/static/big/result/hepai/ENTJ.png'" mode="widthFix"></image>
			<image class="qihe1" v-if="mbtiPartner1 == 'ENTP'" :src="imgPath+'/static/big/result/hepai/ENTP.png'" mode="widthFix"></image>
			<image class="qihe1" v-if="mbtiPartner1 == 'ESTJ'" :src="imgPath+'/static/big/result/hepai/ESTJ.png'" mode="widthFix"></image>
			<image class="qihe1" v-if="mbtiPartner1 == 'ESTP'" :src="imgPath+'/static/big/result/hepai/ESTP.png'" mode="widthFix"></image>
			<image class="qihe1" v-if="mbtiPartner1 == 'INFP'" :src="imgPath+'/static/big/result/hepai/INFP.png'" mode="widthFix"></image>
			<image class="qihe1" v-if="mbtiPartner1 == 'INTJ'" :src="imgPath+'/static/big/result/hepai/INTJ.png'" mode="widthFix"></image>
			<image class="qihe1" v-if="mbtiPartner1 == 'ISTJ'" :src="imgPath+'/static/big/result/hepai/ISTJ.png'" mode="widthFix"></image>
			<image class="qihe1" v-if="mbtiPartner1 == 'ISTP'" :src="imgPath+'/static/big/result/hepai/ISTP.png'" mode="widthFix"></image>
			<!-- 契合人格2 -->
			<image class="qihe2" v-if="mbtiPartner2 == 'ENFJ'" :src="imgPath+'/static/big/result/hepai/ENFJ.png'" mode="widthFix"></image>
			<image class="qihe2" v-if="mbtiPartner2 == 'ENFP'" :src="imgPath+'/static/big/result/hepai/ENFP.png'" mode="widthFix"></image>
			<image class="qihe2" v-if="mbtiPartner2 == 'ESFJ'" :src="imgPath+'/static/big/result/hepai/ESFJ.png'" mode="widthFix"></image>
			<image class="qihe2" v-if="mbtiPartner2 == 'ESFP'" :src="imgPath+'/static/big/result/hepai/ESFP.png'" mode="widthFix"></image>
			<image class="qihe2" v-if="mbtiPartner2 == 'INFJ'" :src="imgPath+'/static/big/result/hepai/INFJ.png'" mode="widthFix"></image>
			<image class="qihe2" v-if="mbtiPartner2 == 'INTP'" :src="imgPath+'/static/big/result/hepai/INTP.png'" mode="widthFix"></image>
			<image class="qihe2" v-if="mbtiPartner2 == 'ISFJ'" :src="imgPath+'/static/big/result/hepai/ISFJ.png'" mode="widthFix"></image>
			<image class="qihe2" v-if="mbtiPartner2 == 'ISFP'" :src="imgPath+'/static/big/result/hepai/ISFP.png'" mode="widthFix"></image>
			<image class="qihe2" v-if="mbtiPartner2 == 'ENTJ'" :src="imgPath+'/static/big/result/hepai/ENTJ.png'" mode="widthFix"></image>
			<image class="qihe2" v-if="mbtiPartner2 == 'ENTP'" :src="imgPath+'/static/big/result/hepai/ENTP.png'" mode="widthFix"></image>
			<image class="qihe2" v-if="mbtiPartner2 == 'ESTJ'" :src="imgPath+'/static/big/result/hepai/ESTJ.png'" mode="widthFix"></image>
			<image class="qihe2" v-if="mbtiPartner2 == 'ESTP'" :src="imgPath+'/static/big/result/hepai/ESTP.png'" mode="widthFix"></image>
			<image class="qihe2" v-if="mbtiPartner2 == 'INFP'" :src="imgPath+'/static/big/result/hepai/INFP.png'" mode="widthFix"></image>
			<image class="qihe2" v-if="mbtiPartner2 == 'INTJ'" :src="imgPath+'/static/big/result/hepai/INTJ.png'" mode="widthFix"></image>
			<image class="qihe2" v-if="mbtiPartner2 == 'ISTJ'" :src="imgPath+'/static/big/result/hepai/ISTJ.png'" mode="widthFix"></image>
			<image class="qihe2" v-if="mbtiPartner2 == 'ISTP'" :src="imgPath+'/static/big/result/hepai/ISTP.png'" mode="widthFix"></image>
			<image class="challenge" @click="challenge" :src="imgPath+'/static/big/result/challenge.png'" mode="widthFix"></image>
			<image class="square" @click="square" :src="imgPath+'/static/big/result/square.png'" mode="widthFix"></image>
			<image class="share breath" @click="share" :src="imgPath+'/static/big/result/share.png'" mode="widthFix"></image>
		</view>
		<!-- 确认人格弹窗 -->
		<Personality ref="showRege" @success="confirmBtn" ></Personality>
		<!-- 组队规则弹窗 -->
		<Rules ref="rules" @findTeam="findTeam" @team="zudui"></Rules>
		<!-- 挑战规则弹窗 -->
		<ChallengeList ref="showChallenge" @success="teamName" @cancel="cancelBtn" @viewRules="viewRules"></ChallengeList>
		<!-- 小队名字弹窗 -->
		<TeamName ref="showTeamName" @success="toTeamCenter" :engName="engName"></TeamName>
		<!-- 寻队启事弹窗 -->
		<view class="mask">
		<u-popup v-model="showTeam" mode="center" :mask-close-able="false">
				<view class="mwrap1">
					<u-avatar class="avatar" size="64" :src="avatar"></u-avatar>
					<view class="nick ellipsis">{{nickname}}</view>
					<image class="renge" v-if="mbtiType == 'ENFJ'" :src="imgPath+'/static/big/findTeam/ENFJ.png'" mode="widthFix"></image>
					<image class="renge" v-if="mbtiType == 'ENFP'" :src="imgPath+'/static/big/findTeam/ENFP.png'" mode="widthFix"></image>
					<image class="renge" v-if="mbtiType == 'ESFJ'" :src="imgPath+'/static/big/findTeam/ESFJ.png'" mode="widthFix"></image>
					<image class="renge" v-if="mbtiType == 'ESFP'" :src="imgPath+'/static/big/findTeam/ESFP.png'" mode="widthFix"></image>
					<image class="renge" v-if="mbtiType == 'INFJ'" :src="imgPath+'/static/big/findTeam/INFJ.png'" mode="widthFix"></image>
					<image class="renge" v-if="mbtiType == 'INTP'" :src="imgPath+'/static/big/findTeam/INTP.png'" mode="widthFix"></image>
					<image class="renge" v-if="mbtiType == 'ISFJ'" :src="imgPath+'/static/big/findTeam/ISFJ.png'" mode="widthFix"></image>
					<image class="renge" v-if="mbtiType == 'ISFP'" :src="imgPath+'/static/big/findTeam/ISFP.png'" mode="widthFix"></image>
					<image class="renge" v-if="mbtiType == 'ENTJ'" :src="imgPath+'/static/big/findTeam/ENTJ.png'" mode="widthFix"></image>
					<image class="renge" v-if="mbtiType == 'ENTP'" :src="imgPath+'/static/big/findTeam/ENTP.png'" mode="widthFix"></image>
					<image class="renge" v-if="mbtiType == 'ESTJ'" :src="imgPath+'/static/big/findTeam/ESTJ.png'" mode="widthFix"></image>
					<image class="renge" v-if="mbtiType == 'ESTP'" :src="imgPath+'/static/big/findTeam/ESTP.png'" mode="widthFix"></image>
					<image class="renge" v-if="mbtiType == 'INFP'" :src="imgPath+'/static/big/findTeam/INFP.png'" mode="widthFix"></image>
					<image class="renge" v-if="mbtiType == 'INTJ'" :src="imgPath+'/static/big/findTeam/INTJ.png'" mode="widthFix"></image>
					<image class="renge" v-if="mbtiType == 'ISTJ'" :src="imgPath+'/static/big/findTeam/ISTJ.png'" mode="widthFix"></image>
					<image class="renge" v-if="mbtiType == 'ISTP'" :src="imgPath+'/static/big/findTeam/ISTP.png'" mode="widthFix"></image>
					<image class="join" mode="widthFix" :src="imgPath+'/static/big/findTeam/mejoin.png'"></image>
					<image class="find" mode="widthFix" :src="imgPath+'/static/big/findTeam/mefind.png'"></image>
					<image class="person" mode="widthFix" :src="imgPath+'/static/big/findTeam/me.png'"></image>
					<image class="confirmBtn" mode="widthFix" :src="imgPath+'/static/big/findTeam/findTeam.png'"></image>
					<view class="confirm" @click="">
						<button class="shareBtn" open-type="share" ref="share"> </button>
					</view>
					<image class="wait" @click="wait" mode="widthFix" :src="imgPath+'/static/big/findTeam/goback.png'"></image>

				</view>
			</u-popup>
		</view>
		<!--生成海报后的图  -->
		<view class="canvas-box" style="opacity: 0;height: 0;overflow: hidden;">
			<canvas canvas-id="mycanvas" style="width: 750rpx;height: 1550rpx;position:absolute;left:-1000rpx;" />
		</view>
		<BgMusic ref="bgMusic"/>
		<ActivityEnd ref="activityEnd"/>
	</view>
</template>

<script>
	import http from "@/src/http";
	import { saveImage } from "./saveImage2";
	import Personality from '@/components/personality.vue'
	import Rules from '@/components/rules.vue'
	import ChallengeList from '@/components/challengeList.vue'
	import TeamName from '@/components/teamName.vue'
	export default {
		components:{
			Personality,
			Rules,
			ChallengeList,
			TeamName
		},
		mixins: [saveImage],
		data() {
			return {
				mbtiType: '',
				avatar: '',
				nickname: '',
				confirmRege: false,
				mbtiPartner1: '',
				mbtiPartner2: '',
				showTeam: false,
				taskList:[], //任务列表
				engName:'',//企业微信名
				teamId: '',
				stage: '',
				status: '',//当前用户的组队状态:0=取消组队(不会出现) 1=组队中 2=完成组队
			}
		},
		onLoad(options) {
			//this.loadData()
			//this.getTask()
			//this.getEngName()
		},
		onShow(){
			this.loadData()
			this.getTask()
			this.getEngName()
		},
		methods: {
			loadData(){
				http.initData().then(res=>{
					this.stage = res.data.config.stage
					if(this.stage == 3){
						this.$refs.activityEnd.show()
					}
					this.avatar = res.data.mbtiUser.avatar
					this.nickname = res.data.mbtiUser.nickname
					this.mbtiType = res.data.mbtiUser.mbti
					this.confirmRege = (res.data.mbtiUser.mbtiStatus == 2)
					this.mbtiStatus = res.data.mbtiUser.mbtiStatus;
					this.status = res.data.mbtiUser.status
					this.mbtiPartner1 = res.data.mbtiUser.mbtiPartner[0]
					this.mbtiPartner2 = res.data.mbtiUser.mbtiPartner[1]
				})
			},
			getTask(){
				http.initTasks().then(res=>{
					if(res.status==0){
						this.taskList = res.data.initTasks
						this.teamId = res.data.mbtiUser.teamId
						wx.setStorageSync("teamId",res.data.mbtiUser.teamId);
					}
				})
			},
			getEngName(){
				http.getName().then(res=>{
					this.engName = res.data
				})
			},
			retest(){
				uni.redirectTo({
					url:'/pages/activeB/index/index'
				});
			},
			confirm(){
				this.$refs.showRege.regBool = true
			},
			confirmBtn(){
				this.confirmRege = true
				this.loadData()
				this.getTask();
				setTimeout(()=>{
					wx.pageScrollTo({
						scrollTop: 1500,
						duration: 300
					});
				},300)
			},
			findTeam(){
				this.showTeam = true
			},
			zudui(){
				this.$refs.showChallenge.show(this.taskList);
				//this.$refs.showChallenge.regBool = true
			},
			cancelBtn(){
				this.showTeam = false
			},
			teamName(){
				this.$refs.showTeamName.regBool = true
			},
			viewRules(){
				this.$refs.rules.regBool = true
			},
			challenge(){
				if(this.stage == 3){
					this.$refs.activityEnd.show()
					return
				}
				if(this.status == 1&&this.teamId>0){
					uni.redirectTo({
						url:'/pages/activeB/teamCenter/index?teamId='+ this.teamId
					});
				}else if(this.status == 2&&this.teamId>0){
					uni.redirectTo({
						url:'/pages/activeB/teamCenter/index?teamId='+ this.teamId
					});
				}else{
					this.$refs.rules.show()
				}
			},
			toTeamCenter(data={}){
				let mbtiUser = data.mbtiUser||{};
				this.mbtiTeam = data.mbtiTeam||{};
				uni.redirectTo({
					url:'/pages/activeB/teamCenter/index?teamId='+ mbtiUser.teamId
				});
			},
			square(){
				if (getCurrentPages().length >= 10) {//判断当前页面栈是否大于等于10.如果大于或等于就使用wx.redirectTo来跳转页面，清除当前页面栈
					uni.redirectTo({
						url:'/pages/activeB/square/index'
					});
				} else {
					uni.navigateTo({
						url:'/pages/activeB/square/index'
					});
				}
			},
			wait(){
				this.showTeam = false
			},
			share(){
				this.getEwm()
			},
			getEwm(){
				this.mainPic = this.imgPath + '/static/big/result/'+this.mbtiType+'.png'
				this.erPic = '/static/img/ewm.png'
				this.topPic = this.imgPath + '/static/big/square/heng.png'
				this.bottomPic = this.imgPath + '/static/big/result/bcbottom.png'
				this.avatar = this.avatar
				this.txt = this.nickname
				this.formSubmit()
				// const env_version = process.env.NODE_ENV != 'production' ? 'trial' : 'release'
				// http.qrCode({scene: 'name=activeB', width: 280, page: 'pages/index',env_version: env_version}).then(res=>{
				// 	this.mainPic = this.imgPath + '/static/big/result/'+this.mbtiType+'.png'
				// 	this.erPic = res.data
				// 	this.topPic = this.imgPath + '/static/big/square/heng.png'
				// 	this.bottomPic = this.imgPath + '/static/big/result/bcbottom.png'
				// 	this.avatar = this.avatar
				// 	this.txt = this.nickname
				// 	this.formSubmit()
				// })
			},
		},
		onShareAppMessage() {
			http.writeLog2({type:2});
			let path,title;
			if(this.mbtiStatus<2){
				title = '我正在参加光子MBTI测试，快来一起测试吧！';
				path = '/pages/index?name=activeB';
			}else{
				title = `我的光子人格是${this.mbtiType}，快来测测你的光子MBTI人格吧`;
				path = '/pages/index?name=activeB';
			}
			if(this.teamId>0){
				let params = encodeURIComponent(`/pages/activeB/teamCenter/index?teamId=${this.teamId}`)
			    path = `/pages/index?page=${params}`;
				title = `正在火热组队中，快来加入吧！`
			}else{
				let params = encodeURIComponent(`/pages/activeB/findTeam/index?avatar=${this.avatar}&nickname=${this.nickname}&mbtiType=${this.mbtiType}`)
				path = `/pages/index?page=${params}`;
				title = `我是光子${this.mbtiType}，正在寻找合拍小队...`
			}
			return {
				title:title,
				imageUrl: '',
				path:path
			}
		},
	}
</script>

<style lang="scss" scoped>
.top{
	position: absolute;
	z-index: 9;
	width: 742rpx;
  top: 20rpx;
  left: 4rpx;
}
.avatar{
	position: absolute;
	z-index: 6;
	top: 137rpx;
	left: 23rpx;
}
.nick{
	position: absolute;
	z-index: 6;
	top: 130rpx;
	left: 137rpx;
	font-size: 50rpx;
	width: 300rpx;
}
.hinit{
	position: absolute;
	z-index: 1;
	top: 1360rpx;
	left: 0;
	width: 750rpx;
}
.retest{
	position: absolute;
	z-index: 6;
	top: 1410rpx;
	left: 47rpx;
	width: 290rpx;
}
.confirm{
	position: absolute;
	z-index: 6;
	top: 1410rpx;
	right: 47rpx;
	width: 290rpx;
}
.qihe{
	position: absolute;
	z-index: 2;
	top: 1360rpx;
	left: 0;
	width: 750rpx;
}
.qihe1{
	position: absolute;
	z-index: 6;
	top: 1580rpx;
	left: 54rpx;
	width: 290rpx;
}
.qihe2{
	position: absolute;
	z-index: 6;
	top: 1580rpx;
	right: 60rpx;
	width: 290rpx;
}
.challenge{
	position: absolute;
	z-index: 6;
	top: 2000rpx;
	left: 120rpx;
	width: 510rpx;
}
.square{
	position: absolute;
	z-index: 6;
	top: 2110rpx;
	left: 120rpx;
	width: 510rpx;
}
.share{
	position: absolute;
	z-index: 6;
	top: 2420rpx;
	left: 120rpx;
	width: 516rpx;
}
.mwrap1{
	width: 750rpx;
	height: 1310rpx;
	display: flex;
	justify-content: center;
	position: relative;
	.avatar{
		position: absolute;
    z-index: 6;
    top: 216rpx;
    left: 130rpx;
	}
	.nick{
		position: absolute;
    z-index: 6;
    top: 212rpx;
    left: 213rpx;
    font-size: 50rpx;
    width: 255rpx;
	}
	.renge{
		width: 577rpx;
		position: relative;
	}
	.join{
		position: absolute;
		width: 270rpx;
		top: 625rpx;
		left: 108rpx;
	}
	.find{
		position: absolute;
		width: 241rpx;
		top: 750rpx;
	}
	.person{
		position: absolute;
		width: 189rpx;
    top: 331rpx;
    left: 127rpx;
	}
	.wait{
		position: absolute;
		z-index: 666;
		width: 295rpx;
    height: 75rpx;
    left: 230rpx;
    bottom: 0;
	}
	.confirmBtn{
		position: absolute;
    z-index: 6;
    width: 295rpx;
		top: 1134rpx;
    left: 230rpx;
	}
	.confirm{
		position: absolute;
    z-index: 666;
    width: 295rpx;
    height: 70rpx;
		top: 1134rpx;
    left: 230rpx;
    overflow: hidden;
		.shareBtn{
			background-color: transparent !important;
			width: 295rpx;
    	height: 70rpx;
			position: relative;
			z-index: 6666;
		}
	}
}

</style>